<template>
    <view class="file-upload-list">
        <view v-for="(item, index) in fileList" :key="index" class="file-box">
            <image :src="item.url" mode="widthFix"> </image>
            <view class="btn-clear" @click="deletePic(index)">
                X
            </view>
        </view>
        <view @click="upLoad" class="upload-btn" v-if="fileList.length < max"> + </view>
    </view>
</template>
<script>

export default {
    name: 'FileUpload',
    props: {
        value: { type: Object, default: [] },
        max: { type: Number, default: 8 }
    },
    data() {
        return {
            size: 10,
            fileList: [],
        }
    },
    computed: {
    },
    watch: {
        fileList(newVal) {
            const list = newVal.map(ele => {
                return {
                    attrCaption: ele.tempFilePath.slice(ele.tempFilePath.lastIndexOf('/') + 1),
                    attrSize: ele.size,
                    fileBase64: ele.url,
                }
            })
            this.$emit('input', list)
        },
        value: {
            handler(newValue) {
                console.log(newValue);
                if (!newValue) return
                this.fileList = newValue.map(ele => {
                    return {
                        tempFilePath: '/' + ele.attrCaption,
                        size: ele.attrSize,
                        url: ele.fileBase64,
                    }
                })
            },
            immediate: true
        },
    },

    methods: {
        upLoad() {
            const _this = this
            uni.chooseMedia({
                count: 8, //默认100
                sizeType: ['compressed'],
                compressed: true,
                success: function (res) {
                    console.log(res);
                    _this.select(res)
                }
            });
        },
        select(event) {
            console.log('选择文件：', event)
            const _this = this
            // if (event.tempFiles.some(ele => !this.supportList.includes(ele.type))) {
            //     uni.$u.toast('上传文件格式错误')
            //     this.deletePic(event)
            // } else 
            if (event.tempFiles.some(ele => (ele.size / 1024 / 1024) > this.size)) {
                uni.$u.toast(`上传文件不能超过${this.size}M`)
                this.deletePic(event)
            } else {
                let lists = [].concat(event.tempFiles).slice(0, this.max - 1)
                console.log(event);
                let fileListLen = this.fileList.length
                lists.map((item) => {
                    this.fileList.push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    this.readFileBase64(lists[i].fileType, lists[i].tempFilePath, function (base64) {
                        let item = _this.fileList[fileListLen]
                        _this.fileList.splice(fileListLen, 1, Object.assign(item, {
                            status: 'success',
                            message: '',
                            url: base64
                        }))
                        fileListLen++
                    });
                }
            }
        },
        readFileBase64(type, filePath, callback) {
            const fileSystemManager = uni.getFileSystemManager();
            // 读取文件内容
            fileSystemManager.readFile({
                filePath: filePath, // 指定要读取的文件路径
                encoding: 'base64',
                success: res => {
                    let base = 'data:image/png;base64,'
                    if (type == 'video') {
                        base = 'data:video/x-msvideo;base64,'
                    }
                    const base64Data = base + res.data
                    callback(base64Data)
                },
                fail: err => {
                    // 读取文件失败的处理逻辑
                    console.error('读取文件失败', err);
                }
            });
        },
        // 删除图片
        deletePic(index) {
            this.fileList.splice(index, 1)
        },
    }
}
</script>
<style lang="scss">
.file-upload-list {
    padding-top: 16rpx;
    display: grid;
    grid-template-columns: repeat(4, 160rpx);
    // grid-template-rows: repeat(auto-fill, 160rpx);
    grid-area: 16rpx;
    grid-gap: 16rpx;
    text-align: center;

    .upload-btn {
        width: 160rpx;
        height: 160rpx;
        font-size: 40rpx;
        font-weight: bold;
        line-height: 160rpx;
    }

    >view {

        border: 2rpx solid #DDDDDD;
    }

    .file-box {
        position: relative;

        .btn-clear {
            position: absolute;
            top: 0;
            right: 0;
            width: 35rpx;
            height: 35rpx;
            font-size: 20rpx;
            color: #FFFF;
            background-color: #666;
            border-bottom-left-radius: 25rpx;
            padding-left: 5rpx;
        }
    }

    image {
        width: 160rpx;
        height: 160rpx;
    }
}
</style>
